<style type="text/css">
    @media (orientation: landscape) and (min-width: 600px){
        div#memberListContainer>div{
            width: 33.3%;
        }
        .memberIMG{
            max-height: 170px;
        }
    }
    @media (max-width: 599px){
        div#memberListContainer>div{
            width: 50%;
        }
        .memberIMG{
            max-height: 170px;
        }
    }
    @media (orientation: portrait){
        div#memberListContainer>div{
            width: 50%;
        }
        .memberIMG{
            max-height: 120px;
        }
    }
    div#memberListContainer>div{
        position: relative;
        height: 200px;
        box-sizing: border-box;
        float: left;
        border-radius: 5px;
        padding: 5px;
    }
    memberIcon{
        /*border: 1px solid #bbb;*/
        width: 100%;
        height: 100%;
        display: block;
        vertical-align: middle;
    }
    memberIcon:hover{
        /*background-color: #fff;*/
    }
    #structureContent{
        vertical-align: top;
    }
    .coopName{
        position: absolute;
        text-align: right;
        font-weight: normal;
        font-size: 70%;
        color: #888;
        bottom: 5px;
        right: 10px;
        height: 25px;
        overflow: hidden;
    }
</style>
<script type="text/javascript">
    var coopID='';
    function setCoop(coopIDs,coopName){
        coopID=coopIDs;
        $('#coopName').html(coopName);
    }
</script>
<div class='col-md-12'>
    <div class='col-md-6'></div>
    <div class='col-md-6'>
        <div class="input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span>
            </span>
            <input id="keyword" type="text" class="form-control" placeholder="ค้นหาเกษตร">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span id='coopName'>สังกัด</span> <span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="javascript:setCoop('','ทั้งหมด');memberList();">ทั้งหมด</a></li>
                    <li class="divider"></li>
                    <?php
                        $query="
                            select      *
                            from        coop_type
                            order by    coopName
                            ";
                        $result=$mysqli->query($query);
                        while($row=$result->fetch_array(MYSQLI_ASSOC)){
                            ?>
                    <li><a href="javascript:setCoop('<?=$row["coopID"]?>','<?=$row["coopName"]?>');memberListContainer();"><?=$row["coopName"]?></a></li>
                                <?php
                        }
                    ?>
                </ul>
            </div><!-- /btn-group -->
        </div>
    </div>
</div>
<div class="col-md-12" id="memberListContainer" style="display: inline-block;margin-left: auto;margin-right: auto;"></div>
<div id="registButton"
    onclick="window.open('?page=member/memberRegist','_self');"
    style="
        position: fixed;
        background-color: #A1D1FF;
        border-radius: 100px;
        color: #fff;
        width: 70px;
        height: 70px;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
        box-shadow: 1px 1px 3px #000;
        z-index: 1000;
        ">
    <table class="noSpacing" style="width:100%;height: 100%;">
        <tr>
            <td style="text-align: center;vertical-align: middle;font-size: 30px">
                <img src="img/add.png" height="40">
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    function memberListContainer(){
        $.post('member/memberListContainer.php',{
            keyword: $('#keyword').val(),
            coopID: coopID
        },function(data){
            $('#memberListContainer').html(data);
        });
    }
    $('document').ready(function(){
        $('mainmenu').on('touchstart', function(){
            $(this).css('background-color','#059fe7');
        }).on('touchend',function(){
            $(this).css('background-color','');
        }).on('touchmove',function(){
            $(this).css('background-color','');
        }).on('mousedown',function(){
            $(this).css('background-color','#059fe7');
        }).on('mouseup',function(){
            $(this).css('background-color','');
        });
        
        $('#keyword').keyup(function(){
            memberListContainer();
        });
        memberListContainer();
    });
</script>